<template>
  <div style="width: 100%; height: 100%">
    <Header title="检测计划兑现情况" />
    <div class="content">
      <div id="gauge1" style="width: 33%; height: 100%" />
      <div id="gauge2" style="width: 33%; height: 100%" />
      <div id="gauge3" style="width: 33%; height: 100%" />
    </div>
  </div>
</template>
<script>
import { fontSize } from '@/utils'
import Header from './header.vue'
import echarts from 'echarts'
import { testDataStatistics } from '@/api/cms/index/index.js'
export default {
  components: {
    Header
  },
  props: {
    deptCode: {
      type: String,
      default: ''
    },
    railTypes: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      data: {}
    }
  },
  watch: {
    railTypes(ov) {
      this.init()
    }
  },
  mounted() {
    this.init()
    const that = this
    window.addEventListener('resize', function() {
      that.$nextTick((_) => {
        const myChart1 = echarts.init(document.getElementById('gauge1'))
        const myChart2 = echarts.init(document.getElementById('gauge2'))
        const myChart3 = echarts.init(document.getElementById('gauge3'))
        myChart1.resize()
        myChart2.resize()
        myChart3.resize()
      })
    })
  },
  methods: {
    init() {
      testDataStatistics({
        railTypes: this.railTypes,
        deptCode: this.deptCode,
        railTypeList: this.railTypes.split(',')
      }).then((res) => {
        this.data = res.data
        this.showEcharts()
      })
    },
    showEcharts() {
      const that = this
      const myChart1 = echarts.init(document.getElementById('gauge1'))
      const myChart2 = echarts.init(document.getElementById('gauge2'))
      const myChart3 = echarts.init(document.getElementById('gauge3'))
      const option1 = {
        title: {
          // 仪表盘标题。
          text: Number(this.data.completeRate1C) + '%',
          x: 'center',
          bottom: fontSize(0.4),
          triggerEvent: true,
          show: true, // 是否显示标题,默认 true。
          textStyle: {
            // 文字颜色
            color: '#66FFFF',
            fontSize: fontSize(0.3),
            fontWeight: 'normal'

          }
        },
        grid: {
          right: '10%',
          left: '10%',
          top: '10%',
          bottom: '10%',
          borderWidth: 1
        },
        xAxis: {
          show: false,
          type: 'category',
          data: ['Mon']
        },
        yAxis: {
          show: false,
          type: 'value'
        },
        series: [
          {

            name: '4C',
            type: 'gauge',
            radius: '60%',
            detail: {
              offsetCenter: [0, '110%'],
              formatter: '1C',
              textStyle: {
                color: '#fff',
                // 字体大小
                fontSize: fontSize(0.16)
              }
            },
            min: 0,
            max: 100,
            splitNumber: 4,
            startAngle: 180,
            endAngle: 0,
            zlevel: 0,
            data: [
              {
                value: Number(this.data.completeRate1C)
              }
            ],
            legend: {
              padding: 0,
              margin: 0
            },
            pointer: {
              show: true,
              length: '80%',
              radius: '50%',
              width: 3 // 指针粗细
            },
            itemStyle: {
              color: '#9CF9FF'
            },
            markLine: {
              precision: 2
            },
            axisTick: {
              show: false,
              splitNumber: 5,
              lineStyle: {
                width: 2
              },
              length: -8
            }, // 刻度样式
            splitLine: {
              show: true,
              length: -8,
              lineStyle: {
                color: 'rgba(73, 143, 207, 0.4)' // 用颜色渐变函数不起作用
              }
            }, // 分隔线样式
            axisLabel: {
              show: true,
              distance: -20,
              textStyle: {
                color: '#498FCF'
              }
            },
            axisLine: {
              show: true,

              lineStyle: {
                width: 15,
                color: [
                  [
                    1,
                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: '#0BBED7'
                      },
                      {
                        offset: 0.25,
                        color: '#1BA7E3'
                      },
                      {
                        offset: 0.75,
                        color: '#1B77E3'
                      },
                      {
                        offset: 1,
                        color: '#115BEB'
                      }
                    ])
                  ]
                ]
              }
            }
          },
          {
            name: '小圆形',
            type: 'pie',
            hoverAnimation: false,
            legendHoverLink: false,
            zlevel: 0,
            radius: ['0%', '5%'],
            tooltip: {
              show: false
            },
            z: 10,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: 100,
                name: '2',
                itemStyle: {
                  normal: {
                    color: 'rgba(102, 157, 174, 0.4)'
                  }
                }
              }
            ]
          }
        ]
      }
      const option2 = {
        title: {
          // 仪表盘标题。
          text: Number(this.data.completeRate2C) + '%',
          x: 'center',
          bottom: fontSize(0.4),
          triggerEvent: true,
          show: true, // 是否显示标题,默认 true。
          textStyle: {
            // 文字颜色
            color: '#66FFFF',
            fontSize: fontSize(0.3),
            fontWeight: 'normal'

          }
        },
        grid: {
          right: '10%',
          left: '10%',
          top: '10%',
          bottom: '10%',
          borderWidth: 1
        },
        xAxis: {
          show: false,
          type: 'category',
          data: ['Mon']
        },
        yAxis: {
          show: false,
          type: 'value'
        },
        series: [
          {

            name: '4C',
            type: 'gauge',
            radius: '60%',
            detail: {
              offsetCenter: [0, '100%'],
              formatter: '2C',
              textStyle: {
                color: '#fff',
                // 字体大小
                fontSize: fontSize(0.16)
              }
            },
            min: 0,
            max: 100,
            splitNumber: 4,
            startAngle: 180,
            endAngle: 0,
            zlevel: 0,
            data: [
              {
                value: Number(this.data.completeRate2C)
              }
            ],
            legend: {
              padding: 0,
              margin: 0
            },
            pointer: {
              show: true,
              length: '80%',
              radius: '50%',
              width: 3 // 指针粗细
            },
            itemStyle: {
              color: '#9CF9FF'
            },
            markLine: {
              precision: 2
            },
            axisTick: {
              show: false,
              splitNumber: 5,
              lineStyle: {
                width: 2
              },
              length: -8
            }, // 刻度样式
            splitLine: {
              show: true,
              length: -8,
              lineStyle: {
                color: 'rgba(73, 143, 207, 0.4)' // 用颜色渐变函数不起作用
              }
            }, // 分隔线样式
            axisLabel: {
              show: true,
              distance: -20,
              textStyle: {
                color: '#498FCF'
              }
            },
            axisLine: {
              show: true,

              lineStyle: {
                width: 15,
                color: [
                  [
                    1,
                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: '#0BBED7'
                      },
                      {
                        offset: 0.25,
                        color: '#1BA7E3'
                      },
                      {
                        offset: 0.75,
                        color: '#1B77E3'
                      },
                      {
                        offset: 1,
                        color: '#115BEB'
                      }
                    ])
                  ]
                ]
              }
            }
          },
          {
            name: '小圆形',
            type: 'pie',
            hoverAnimation: false,
            legendHoverLink: false,
            zlevel: 0,
            radius: ['0%', '5%'],
            tooltip: {
              show: false
            },
            z: 10,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: 100,
                name: '2',
                itemStyle: {
                  normal: {
                    color: 'rgba(102, 157, 174, 0.4)'
                  }
                }
              }
            ]
          }
        ]
      }
      const option3 = {
        title: {
          // 仪表盘标题。
          text: Number(this.data.completeRate4C) + '%',
          x: 'center',
          bottom: fontSize(0.4),
          triggerEvent: true,
          show: true, // 是否显示标题,默认 true。
          textStyle: {
            // 文字颜色
            color: '#66FFFF',
            fontSize: fontSize(0.3),
            fontWeight: 'normal'

          }
        },
        grid: {
          right: '10%',
          left: '10%',
          top: '10%',
          bottom: '10%',
          borderWidth: 1
        },
        xAxis: {
          show: false,
          type: 'category',
          data: ['Mon']
        },
        yAxis: {
          show: false,
          type: 'value'
        },
        series: [
          {

            name: '4C',
            type: 'gauge',
            radius: '60%',
            detail: {
              offsetCenter: [0, '100%'],
              formatter: '4C',
              textStyle: {
                color: '#fff',
                // 字体大小
                fontSize: fontSize(0.16)
              }
            },
            min: 0,
            max: 100,
            splitNumber: 4,
            startAngle: 180,
            endAngle: 0,
            zlevel: 0,
            data: [
              {
                value: Number(this.data.completeRate4C)
              }
            ],
            legend: {
              padding: 0,
              margin: 0
            },
            pointer: {
              show: true,
              length: '80%',
              radius: '50%',
              width: 3 // 指针粗细
            },
            itemStyle: {
              color: '#9CF9FF'
            },
            markLine: {
              precision: 2
            },
            axisTick: {
              show: false,
              splitNumber: 5,
              lineStyle: {
                width: 2
              },
              length: -8
            }, // 刻度样式
            splitLine: {
              show: true,
              length: -8,
              lineStyle: {
                color: 'rgba(73, 143, 207, 0.4)' // 用颜色渐变函数不起作用
              }
            }, // 分隔线样式
            axisLabel: {
              show: true,
              distance: -20,
              textStyle: {
                color: '#498FCF'
              }
            },
            axisLine: {
              show: true,

              lineStyle: {
                width: 15,
                color: [
                  [
                    1,
                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: '#0BBED7'
                      },
                      {
                        offset: 0.25,
                        color: '#1BA7E3'
                      },
                      {
                        offset: 0.75,
                        color: '#1B77E3'
                      },
                      {
                        offset: 1,
                        color: '#115BEB'
                      }
                    ])
                  ]
                ]
              }
            }
          },
          {
            name: '小圆形',
            type: 'pie',
            hoverAnimation: false,
            legendHoverLink: false,
            zlevel: 0,
            radius: ['0%', '5%'],
            tooltip: {
              show: false
            },
            z: 10,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: 100,
                name: '2',
                itemStyle: {
                  normal: {
                    color: 'rgba(102, 157, 174, 0.4)'
                  }
                }
              }
            ]
          }
        ]
      }
      myChart1.setOption(option1)
      myChart2.setOption(option2)
      myChart3.setOption(option3)
      myChart1.on('click', function(params) {
        that.$emit('module1Click', { moduleType: 'module3', title: '检测计划兑现详情', CType: '1C' })
      })
      myChart2.on('click', function(params) {
        that.$emit('module1Click', { moduleType: 'module3', title: '检测计划兑现详情', CType: '2C' })
      })
      myChart3.on('click', function(params) {
        that.$emit('module1Click', { moduleType: 'module4', title: '检测计划兑现详情', CType: '4C' })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.num {
  font-family: YouSheBiaoTiHei;
  font-style: normal;
  font-weight: normal;
  font-size: 30px;
  color: #3e9cff;
}
.name {
  font-family: YouSheBiaoTiHei;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 23px;
}
.content {
  width: 100%;
  height: calc(100% - 70px);
  display: flex;
  justify-content: space-between;
}
</style>
